<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 指令 v-for</title>
    </head>
    <body>
        <div id="descr">
            
            <h1>
                v-for 有两种语法形式：数组和对象:
            </h1>
        </div>
        <div id="app">
                <h2>数组用法</h2>
                <ul id="example-1">
                    <li v-for="item in items">
                        {{ item.message }}
                    </li>
                </ul>

                <ul id="example-2">
                    <li v-for="item of items">
                        {{ item.message }}
                    </li>
                </ul>

                <ul id="example-3">
                    <li v-for="(item, index) in items">
                        {{ parentMessage }} - {{ index }} - {{ item.message }}
                    </li>
                </ul>

                <p style="color: red">注意：由于 JavaScript 的限制，Vue 不能检测以下数组的变动：</p>
                <p style="color: red"> 1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue</p>
                <p style="color: red"> 2. 当你修改数组的长度时，例如：vm.items.length = newLength</p>

                <h2>对象用法</h2>
                <ul id="example-4">
                    <li v-for="value in object">
                        {{ value }}
                    </li>
                </ul>
                
                <ul id="example-5">
                    <li v-for="(value, name) in object">
                       {{ name }}: {{ value }}
                    </li>
                </ul>

                <ul id="example-6">
                    <li v-for="(value, name, index) in object">
                         {{ index }}. {{ name }}: {{ value }}
                    </li>
                </ul>

                <p style="color: red">注意：由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：</p>
                <p style="color: red"> 1. 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。</p>

                <h2>除此之外，v-for 可以迭代数字，可以用在 template 上</h2>
                <div>
                    <span v-for="n in 10">{{ n }} </span>
                </div>

                <ul>
                    <template v-for="item in items">
                        <li>{{ item.msg }}</li>
                        <li class="divider" role="presentation"></li>
                    </template>
                </ul>

                <p style="color: red">注意：不推荐在同一元素上使用 v-if 和 v-for，v-for 优先级比 v-if 高</p>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    parentMessage: 'Parent',
                    items: [
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ],
                    object: {
                        title: 'How to do lists in Vue',
                        author: 'Jane Doe',
                        publishedAt: '2016-04-10'
                    }
                },
                methods: {
                }
            })
        </script>
    </body>
</html>